<!-- 新增商铺 -->
<template>
	<div class="addshop">
		<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom:15px;">
            <el-breadcrumb-item>交易中心</el-breadcrumb-item>
            <el-breadcrumb-item>资产招租</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path: '/shopmanage'}">商铺管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{type=="add"?"新增":"编辑"}}商铺</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="steprogress">
        	<el-steps :active="active" simple :space="200">
                <el-step title="第一步：基础信息"></el-step>
                <el-step title="第二步：详细信息" ></el-step>
                <el-step title="第三步：关联信息"></el-step>
            </el-steps>
        </div>
        <div class="shopContent" style="margin-top: 30px;">
        	<el-form ref="form" :model="params" label-width="100px" label-position="right" :rules="rules">
				<div v-show="active == 1">
	                <div style="overflow: hidden">
	                    <el-form-item label="城市区域：" style="float: left;" prop="cityId">
	                        <el-select v-model="params.cityId" placeholder="请选择城市" @change="loadisOrdev" filterable>
	                            <el-option v-for="(item,index) in citys"
	                                       :key="index"
	                                       :label="item.city"
	                                       :value="item.cityId">
	                            </el-option>
	                        </el-select>
	                    </el-form-item>
	                    <el-form-item style="float: left;" class="commonmargin" prop="areaId">
	                        <el-select v-model="params.areaId" placeholder="请选择区域" @change="loadtrading" filterable>
	                            <el-option v-for="(item,index) in districts"
	                                       :key="index"
	                                       :label="item.area"
	                                       :value="item.areaId">
	                            </el-option>
	                        </el-select>
	                    </el-form-item>
	                    <el-form-item style="float: left;" class="commonmargin" prop="tradingCode">
	                        <el-select v-model="params.tradingCode" placeholder="请选择商圈" filterable>
	                            <el-option v-for="(item,index) in shopcircle"
	                                       :key="index"
	                                       :label="item.value"
	                                       :value="item.id">
	                            </el-option>
	                        </el-select>
	                    </el-form-item>
	                </div>
	                <div style="overflow: hidden">
	                    <el-form-item label="楼盘名称：" style="float: left;" prop="devId">
	                        <el-select v-model="params.devId" placeholder="请选择楼盘名称"  @change="getlabel" filterable>
	                            <el-option v-for="(item,index) in devs"
	                                       :key="index"
	                                       :label="item.devName"
	                                       :value="item.devId">
	                            </el-option>
	                        </el-select>
	                    </el-form-item>
	                    <el-form-item style="float: left;" class="commonmargin" v-show="devFlag">
	                        <el-input v-model="params.devName " style="width: 217px" placeholder="请输入楼盘名称" :maxlength="40"></el-input>
	                        <span style="color: #dcdfe6;margin-left: 15px">请输入楼盘名称,最长40个字符</span>
	                    </el-form-item>
	                </div>
	                <el-form-item label="详细地址：" prop="detailedAddress">
	                    <el-input v-model="params.detailedAddress " style="width: 450px" placeholder="请输入详细地址" :maxlength="100"></el-input>
	                    <span style="color: #dcdfe6;margin-left: 15px">请输入详细地址,最长100个字符</span>
	                </el-form-item>
	                <el-form-item label="类型：" prop="type">
	                    <el-select v-model="params.type" placeholder="请选择">
	                        <el-option v-for="(item,index) in shopType"
	                                   :key="index"
	                                   :label="item.value"
	                                   :value="item.id">
	                        </el-option>
	                    </el-select>
	                </el-form-item>
	                <el-form-item label="物业费：" >
	                    <el-input v-model="params.propertyFee " style="width: 217px" placeholder="请输入物业费"></el-input>
	                    <span style="color: #dcdfe6;margin-left: 15px">元/㎡.月，限数字，保留两位小数点；</span>
	                </el-form-item>
	                <el-form-item label="物业公司：">
	                    <el-input v-model="params.propertyCompany  " style="width: 450px" placeholder="请输入物业公司名称" :maxlength="100"></el-input>
	                    <span style="color: #dcdfe6;margin-left: 15px">请输入物业公司名称,最长100个字符</span>
	                </el-form-item>
	                <el-form-item label="交通配套：" prop="trafficFacilities">
	                    <el-input v-model="params.trafficFacilities" :rows="2" type="textarea" style="width: 450px" :maxlength="400"></el-input>
	                    <span style="color: #dcdfe6;margin-left: 15px">最多输入400个字符</span>
	                </el-form-item>
	                <el-form-item>
	                    <el-button type="primary" @click="back">返回</el-button>
	                    <el-button type="primary" @click="next">下一步</el-button>
	                </el-form-item>
	            </div>
	            <div v-show="active == 2">
	                <el-form-item label="面积：" prop="area">
	                    <el-input v-model="params.area" style="width: 217px" placeholder="请输入面积"></el-input>
	                    <span style="color: #dcdfe6;margin-left: 15px">㎡，限数字，保留两位小数点；</span>
	                </el-form-item>
	                <el-form-item label="租金：" prop="rent">
	                    <el-input v-model="params.rent" style="width: 217px" placeholder="请输入租金"></el-input>
	                    <span style="color: #dcdfe6;margin-left: 15px">元/月，限数字，保留两位小数点；</span>
	                </el-form-item>
	                <el-form-item label="单价：" prop="unitPrice">
	                    <el-input v-model="params.unitPrice" style="width: 217px" placeholder="请输入单价"></el-input>
	                    <span style="color: #dcdfe6;margin-left: 15px">元/㎡.月，限数字，保留两位小数点；</span>
	                </el-form-item>
	                <el-form-item label="转让费：">
	                    <el-input v-model="params.transferFee" style="width: 217px" placeholder="请输入转让费"></el-input>
	                    <span style="color: #dcdfe6;margin-left: 15px">元/㎡.月，限数字，保留两位小数点；</span>
	                </el-form-item>
	                <el-form-item label="支付方式：" prop="paymentWay">
	                    <el-select v-model="params.paymentWay" placeholder="请选择">
	                        <el-option v-for="(item,index) in paymentWays"
	                                   :key="index"
	                                   :label="item.value"
	                                   :value="item.id">
	                        </el-option>
	                    </el-select>
	                </el-form-item>
	                <div>
	                    <el-form-item label="楼层：" style="display: inline-block" required>
	                        <span>所处楼层</span>
	                        <el-select v-model="curFloor" @change="getcurrentFloor" multiple :multiple-limit=3>
	                            <el-option v-for="(item,index) in currentFloors"
	                                       :key="index"
	                                       :label="item.label"
	                                       :value="item.value">
	                            </el-option>
	                        </el-select>
	                    </el-form-item>
	                    <span>层</span>
	                    <el-form-item style="display: inline-block" class="commonmargin" required>
	                        <span>共</span>
	                        <el-select v-model="params.totalFloor">
	                            <el-option v-for="(item,index) in totalFloors"
	                                       :key="index"
	                                       :label="item.label"
	                                       :value="item.value">
	                            </el-option>
	                        </el-select>
	                    </el-form-item>
	                    <span>层</span>
	                </div>
	                <el-form-item label="装修：" prop="decorate">
	                    <el-select v-model="params.decorate" placeholder="请选择">
	                        <el-option v-for="(item,index) in decorates"
	                                   :key="index"
	                                   :label="item.value"
	                                   :value="item.id">
	                        </el-option>
	                    </el-select>
	                </el-form-item>
	                <el-form-item label="产权：" prop="property">
	                    <el-select v-model="params.property" placeholder="请选择">
	                        <el-option v-for="(item,index) in propertys"
	                                   :key="index"
	                                   :label="item.value"
	                                   :value="item.id">
	                        </el-option>
	                    </el-select>
	                </el-form-item>
	                <el-form-item label="最长租期：" prop="maxLease">
	                    <el-select v-model="params.maxLease" placeholder="请选择">
	                        <el-option v-for="(item,index) in maxLeases"
	                                   :key="index"
	                                   :label="item.value"
	                                   :value="item.id">
	                        </el-option>
	                    </el-select>
	                </el-form-item>
	                <el-form-item label="是否分割：" prop="segmentation">
	                    <el-select v-model="params.segmentation" placeholder="请选择">
	                        <el-option v-for="(item,index) in segmentations"
	                                   :key="index"
	                                   :label="item.value"
	                                   :value="item.id">
	                        </el-option>
	                    </el-select>
	                </el-form-item>
	                <el-form-item label="适合营业：" prop="operations">
	                    <el-checkbox-group v-model="params.operations">
	                        <el-checkbox v-for="item in operations" :label="item.id" :key="item.id">{{item.value}}</el-checkbox>
	                    </el-checkbox-group>
	                </el-form-item>
	                <el-form-item label="当前状态：" prop="currentStatus">
	                    <el-select v-model="params.currentStatus" placeholder="请选择">
	                        <el-option v-for="(item,index) in currentStatuss"
	                                   :key="index"
	                                   :label="item.value"
	                                   :value="item.id">
	                        </el-option>
	                    </el-select>
	                </el-form-item>
	                <el-form-item label="标题：" prop="title">
	                    <el-input v-model="params.title  " style="width: 450px" placeholder="请输入标题名称" :maxlength="100"></el-input>
	                    <span style="color: #dcdfe6;margin-left: 15px">请输入标题名称,最长100字符</span>
	                </el-form-item>
	                <el-form-item label="房源亮点：" prop="houseEdge">
	                    <el-input v-model="params.houseEdge" :rows="2" type="textarea" style="width: 450px" :maxlength="400"></el-input>
	                    <span style="color: #dcdfe6;margin-left: 15px">最多输入400字符</span>
	                </el-form-item>
	                <el-form-item>
	                    <el-button type="primary" @click="prev">上一步</el-button>
	                    <el-button type="primary" @click="next">下一步</el-button>
	                </el-form-item>
	            </div>
	            <div v-show="active == 3">
	                <el-form-item label="配套设施：" prop="labels">
	                    <el-checkbox-group v-model="params.labels">
	                        <el-checkbox v-for="item in labelss" :label="item.labelCode" :key="item.labelCode">{{item.labelName}}</el-checkbox>
	                    </el-checkbox-group>
	                </el-form-item>
	                <div class="picture" style="margin-left: 38px;">
	                    <h4 style="font-size: 14px;font-weight: normal;" class="rpic">图片：</h4>
	                    <div class="imgbox" style="display:flex;flex-wrap:wrap">
	                        <!-- <div class="img-wrap" ref="imgwrap">
	                            <div v-for="(item,index) in params.imgs">
	                                <img :src="item.url"/>
	                                <i class="el-icon-close" @click="delpic(index)"></i>
	                                <input type='text' v-model="item.index" placeholder="请输入图片序号(正整数)"/>
	                            </div>
	                        </div>
	                        <uploadImg @uploadSuccess="uploadSuccess" ref="uploadImg"></uploadImg> -->
							<div class="newBox" v-for="(item,index) in params.imgs" :key="index">
								<img :src="item.url" alt="" style="width:100%;height:100%;"/>
								<div class="mask">
									<i class="icon el-icon-zoom-in" @click="scaleImg(item)" style="color:#fff;"></i>
									<i class="icon el-icon-delete" @click="delpic(index)" style="color:#fff;"></i>
								</div>
								<input class="input" v-model.trim="item.index" placeholder="图片序号(正整数)"/>
							</div>
							<upload ref="uploadRef" @selectedFile="selectedFile" :accept="accept" :multiple="true" class="disUpload" ></upload>
							<viewer v-show="false" :images="previewImg">
								<img
									v-for="(src,index) in previewImg"
									width="100"
									:ref="'prevFile'+ index"
									:src="src"
									:key="index"
								/>
							</viewer>
	                    </div>
	                </div>
	                <div>
	                    <h4 style="margin-left:22px;font-size: 14px;font-weight: normal;">绑定人员</h4>
	                    <el-form-item label="城市：" class="cityornum">
	                        <el-select v-model="saveid" placeholder="请选择城市" @change="changeBroker" filterable>
	                            <el-option v-for="(item,index) in savecitys"
	                                       :key="index"
	                                       :label="item.city"
	                                       :value="item.cityId">
	                            </el-option>
	                        </el-select>
	                    </el-form-item>
	                    <el-form-item label="员工：" class="cityornum">
	                        <el-autocomplete
	                                v-model="jobnumber"
	                                :fetch-suggestions="querySearchAsync"
	                                placeholder="输入手机号或员工号"
	                                @select="handleSelect" style="width: 345px;"
	                        ></el-autocomplete>
	                    </el-form-item>
	                </div>
	                <el-form-item class="bottombtn">
	                    <el-button type="primary" @click="prev">上一步</el-button>
	                    <el-button type="primary" @click="save" :loading="btnloading">保存</el-button>
	                </el-form-item>
	            </div>
        	</el-form>	
        </div>
	</div>
</template>

<script>
	// import uploadImg from "./MultipleImgUpload"
	import upload from "@/components/common/Upload/"
	export default {
		name:"addoreditshop",
		data(){
			return {
				previewImg:[],
				accept: '.jpg,.jpeg,.png',
				id:this.$route.query.id,
				type:this.$route.query.type,
				active:1,
				saveid:"",
		        savecitys:[],
		        jobnumber:"",
		        // searchloading:false,
		        btnloading:false,
		        citys:[],
		        districts:[],
		        shopcircle:[],
		        devs:[],
		        types:[],
		        shopType:[],//商铺类型
		        paymentWays:[],//支付方式
		        decorates:[],//装修
		        propertys:[],//产权
		        maxLeases:[],//最长租期
		        segmentations:[],//是否分割
		        operations:[],//适合营业
		        currentStatuss:[],//当前状态
		        labelss:[],//配套设施
		        devFlag:false,
		        currentFloors:[
		            {value:"-3",label:"-3"},{value:"-2",label:"-2"},{value:"-1",label:"-1"},{value:"1",label:"1"},{value:"2",label:"2"},
		            {value:"3",label:"3"},{value:"4",label:"4"},{value:"5",label:"5"},{value:"6",label:"6"},{value:"7",label:"7"},
		            {value:"8",label:"8"},{value:"9",label:"9"},{value:"10",label:"10"},{value:"11",label:"11"},{value:"12",label:"12"}
		            ,{value:"13",label:"13"},{value:"14",label:"14"},{value:"15",label:"15"},{value:"16",label:"16"},{value:"17",label:"17"}
		            ,{value:"18",label:"18"},{value:"19",label:"19"},{value:"20",label:"20"},{value:"21",label:"21"},{value:"22",label:"22"}
		            ,{value:"23",label:"23"},{value:"24",label:"24"},{value:"25",label:"25"},{value:"26",label:"26"},{value:"27",label:"27"}
		            ,{value:"28",label:"28"},{value:"29",label:"29"},{value:"30",label:"30"},{value:"31",label:"31"},{value:"32",label:"32"}
		            ,{value:"33",label:"33"},{value:"34",label:"34"},{value:"35",label:"35"},{value:"36",label:"36"},{value:"37",label:"37"}
		            ,{value:"38",label:"38"},{value:"39",label:"39"},{value:"40",label:"40"},{value:"41",label:"41"},{value:"42",label:"42"}
		            ,{value:"43",label:"43"},{value:"44",label:"44"},{value:"45",label:"45"},{value:"46",label:"46"},{value:"47",label:"47"}
		            ,{value:"48",label:"48"},{value:"49",label:"49"},{value:"50",label:"50"}
		        ],
		        //所处楼层集合
		        Secondfloors:[
		            // ["-3","-2"],["-2","-1"],["-1","1"],
		            // ["-2","-3"],["-1","-2"],["1","-1"]
		            "-3,-2","-2,-1","-1,1","-2,-3","-1,-2","1,-1"
		        ],
		        Threefloors:[
		            // ["-3","-2","-1"],["-2","-1","1"],["-1","1","2"]
		            "-3,-2,-1","-2,-1,1","-1,1,2", "-3,-2,-1","-2,1,-1","-1,1,2", "-3,-2,-1","-2,-1,1","1,2,-1",
		            "-3,-1,-2","-2,-1,1","-1,1,2", "-3,-2,-1","-1,1,-2","-1,1,2", "-3,-2,-1","-2,-1,1","1,-1,2",
		            "-2,-1,-3","-2,-1,1","-1,1,2", "-3,-2,-1","-1,-2,1","-1,1,2", "-3,-2,-1","-2,-1,1","2,-1,1",
		            "-2,-3,-1","-2,-1,1","-1,1,2", "-3,-2,-1","1,-1,-2","-1,1,2", "-3,-2,-1","-2,-1,1","2,1,-1",
		            "-1,-2,-3","-2,-1,1","-1,1,2", "-3,-2,-1","1,-2,-1","-1,1,2",
		            "-1,-3,-2","-2,-1,1","-1,1,2", "-3,-2,-1","-2,-1,1","-1,2,1",

		        ],
		        totalFloors:[
		            {value:"1",label:"1"},{value:"2",label:"2"},
		            {value:"3",label:"3"},{value:"4",label:"4"},{value:"5",label:"5"},{value:"6",label:"6"},{value:"7",label:"7"},
		            {value:"8",label:"8"},{value:"9",label:"9"},{value:"10",label:"10"},{value:"11",label:"11"},{value:"12",label:"12"}
		            ,{value:"13",label:"13"},{value:"14",label:"14"},{value:"15",label:"15"},{value:"16",label:"16"},{value:"17",label:"17"}
		            ,{value:"18",label:"18"},{value:"19",label:"19"},{value:"20",label:"20"},{value:"21",label:"21"},{value:"22",label:"22"}
		            ,{value:"23",label:"23"},{value:"24",label:"24"},{value:"25",label:"25"},{value:"26",label:"26"},{value:"27",label:"27"}
		            ,{value:"28",label:"28"},{value:"29",label:"29"},{value:"30",label:"30"},{value:"31",label:"31"},{value:"32",label:"32"}
		            ,{value:"33",label:"33"},{value:"34",label:"34"},{value:"35",label:"35"},{value:"36",label:"36"},{value:"37",label:"37"}
		            ,{value:"38",label:"38"},{value:"39",label:"39"},{value:"40",label:"40"},{value:"41",label:"41"},{value:"42",label:"42"}
		            ,{value:"43",label:"43"},{value:"44",label:"44"},{value:"45",label:"45"},{value:"46",label:"46"},{value:"47",label:"47"}
		            ,{value:"48",label:"48"},{value:"49",label:"49"},{value:"50",label:"50"}
		        ],
		        restaurants: [],//输入手机号或者员工号查询的集合
		        curFloor:["1"],//所处楼层
		        params:{
		        	userId:"",
		            cityId:"",
		            areaId:"",
		            tradingCode:"",
		            devId:"",
		            devName:"",
		            detailedAddress:"",//详细地址
		            type:"",//商铺类型
		            propertyFee:"",//物业费
		            propertyCompany:"",//物业公司
		            trafficFacilities:"",//交通配套
		            area:"",//面积
		            rent:"",//租金
		            unitPrice:"",//单价
		            transferFee:"",//转让费
		            paymentWay:"3",//支付方式
		            currentFloor:"",//所处楼层
		            totalFloor:"3",//总楼层
		            decorate:"1",//装修
		            property:"1",//产权
		            maxLease:"1",//最长租期
		            segmentation:"2",//是否分割
		            operations:[],//适合营业
		            currentStatus:"1",//当前状态
		            title:"",//标题
		            houseEdge:"",//房源亮点
		            labels:[],//配套设施
		            imgs:[
		                // {"index":"","url":""}
		            ],//图片链接
		            bindingBrokerId:"",//员工

		        },
		        rules:{
		            cityId:[{required: true, message: '请选择城市', trigger: 'change'}],
		            areaId:[{required: true, message: '请选择区域', trigger: 'change'}],
		            tradingCode:[{required: true, message: '请选择商圈', trigger: 'change'}],
		            devId:[{required: true, message: '请选择楼盘', trigger: 'change'}],
		            detailedAddress:[{required: true, message: '请输入地址', trigger: 'blur'}],
		            type:[{required: true, message: '请选择商铺类型', trigger: 'change'}],
		            trafficFacilities:[{
		                required: true,
		                validator: (rule, value, callback) => {
		                    if (!value) {
		                        return callback(new Error('请输入交通配套'));
		                    }
		                    if (value.length>400) {
		                        return callback(new Error('不超过400个字符'));
		                    }
		                    callback();
		                }
		            }],
		            area:[{
		                required: true,
		                validator: (rule, value, callback) => {
		                    if (!value) {
		                        return callback(new Error('请输入面积'));
		                    }
		                    if (parseFloat(value) < 0) {
		                        return callback(new Error('面积不可为负'));
		                    }
		                    let reg = /^\d+(\.\d{1,2})?$/;
		                    if (!reg.test(value)) {
		                        return callback(new Error('限数字，最多保留两位小数'));
		                    }
		                    callback();
		                }
		            }],
		            rent:[{
		                required: true,
		                validator: (rule, value, callback) => {
		                    if (!value) {
		                        return callback(new Error('请输入租金'));
		                    }
		                    if (parseFloat(value) < 0) {
		                        return callback(new Error('租金不可为负'));
		                    }
		                    let reg = /^\d+(\.\d{1,2})?$/;
		                    if (!reg.test(value)) {
		                        return callback(new Error('限数字，最多保留两位小数'));
		                    }
		                    callback();
		                }
		            }],
		            unitPrice:[{
		                required: true,
		                validator: (rule, value, callback) => {
		                    if (!value) {
		                        return callback(new Error('请输入单价'));
		                    }
		                    if (parseFloat(value) < 0) {
		                        return callback(new Error('单价不可为负'));
		                    }
		                    let reg = /^\d+(\.\d{1,2})?$/;
		                    if (!reg.test(value)) {
		                        return callback(new Error('限数字，最多保留两位小数'));
		                    }
		                    callback();
		                }
		            }],
		            paymentWay:[{required: true, message: '请选择支付方式', trigger: 'change'}],
		            // currentFloor:[{required: true, message: '请选择所处楼层', trigger: 'change'}],
		            totalFloor:[{required: true, message: '请选择所有楼层', trigger: 'change'}],
		            decorate:[{required: true, message: '请选择装修方式', trigger: 'change'}],
		            property:[{required: true, message: '请选择产权', trigger: 'change'}],
		            maxLease:[{required: true, message: '请选择最长租期', trigger: 'change'}],
		            segmentation:[{required: true, message: '请选择是否分割', trigger: 'change'}],
		            operations:[{required: true, message: '请至少选择一个适合营业', trigger: 'change'}],
		            currentStatus:[{required: true, message: '请选择当前状态', trigger: 'change'}],
		            title:[{required: true, message: '请输入标题', trigger: 'blur'}],
		            houseEdge:[{required: true, message: '请输入房源亮点', trigger: 'blur'}],
		            labels:[{required: true, message: '请至少选择一个配套设施', trigger: 'change'}]
		        }
			}
		},
		methods:{
			scaleImg(item){
				const prevIndex = this.previewImg.indexOf(item.url);
				this.$refs["prevFile" + prevIndex][0].click();
			},
			selectedFile(data){
                let reader = new FileReader()
                reader.readAsDataURL(data)
                reader.onloadend = () => {
                  this.params.imgs.push({
                    index:"",
                    fileName:data.name,
                    url:reader.result
                  })
                  this.previewImg.push(reader.result)
                }
                console.log(this.previewImg)
            },
			loadEditData(){
				let formData=new FormData();
				formData.set("id",this.id);
				this.$axios.post('/tenement/shops/selectById',formData).then((res) => {
	                res.cityId=res.cityId.toString();
                    res.areaId=res.areaId.toString();
                    res.tradingCode=Number(res.tradingCode);
                    res.devId=res.devId.toString();
                    this.curFloor=res.currentFloor.split(",")
                    if(res.devId == -1){
                        this.devFlag=true;
                    }
                    this.$axios.get(`/city/cityAreaList/${res.cityId}`).then((res) => {
                        this.districts=res.cityArealist;
                    });
                    this.$axios.post(`/estate/devs/select/mapParam`,{cityId:res.cityId}).then(res => {
                        res.push({devId:"-1",devName:"其他"})
                        this.devs = res;
                    });
                    let AreaformData=new FormData();
                    	AreaformData.set("areaId",res.areaId);
                    this.$axios.post(`/tenement/trading/selectTradingByAreaId`,AreaformData).then((res) => {
                        this.shopcircle=res
                    });
                    this.params=res;
                    // this.params.operations=res.data.operation.split(",");
                    this.saveid=res.broker.city;
                    let tformData=new FormData();
                    tformData.set("cityId",res.broker.city);
                    tformData.set("code",res.broker.employee);
                    this.$axios.post(`/tenement/share/selectBrokerByCityAndPhoneOrJobNumber`,tformData).then(res => {
                        this.restaurants=res;
                        this.jobnumber=res[0].role+"-"+res[0].name+'-'+res[0].phone+'-'+res[0].jobNumber
                    });
                    this.$set(this.params, 'imgs', JSON.parse(res.images));
                    this.$set(this.params, 'labels', res.shopsLabels);
                    this.$set(this.params, 'operations', res.operation.split(","));
                    for(let i=0;i<this.params.imgs.length;i++){
                    	this.previewImg.push(this.params.imgs[i].url)
                    }
	            });
			},
			uploadSuccess(res){
				let tempImg=res.split(",");
				this.params.imgs.push({
					"index":"",
					"url":tempImg[tempImg.length-1]
				})
			},
			warn(msg) {
				this.$message({
					showClose: true,
					message: msg,
					type: 'warning',
					onClose:()=>{
                        
					}
				});
	        },
			loadCity(){
	            this.$axios.post(`/city/cityList`).then((res) => {
	                this.citys=res.cityList;
	            });
	        },
	        loadisOrdev(){
	            this.params.areaId=""
	            this.$axios.get(`/city/cityAreaList/${this.params.cityId}`).then((res) => {
	                this.districts=res.cityArealist;
	            });
	            this.$axios.post(`/estate/devs/select/mapParam`,{cityId:this.params.cityId}).then(res => {
	                res.push({devId:"-1",devName:"其他"})
	                this.devs = res;
	                this.params.devId = '';
	            });
	        },
	        loadtrading(){
	            this.params.tradingCode="";
	            let formData=new FormData();
	            formData.set("areaId",this.params.areaId);
	            this.$axios.post(`/tenement/trading/selectTradingByAreaId`,formData).then((res) => {
	                this.shopcircle=res
	            });
	        },
	        getlabel(val){
	            // console.log(val);
	            let obj = {};

	            if(val== -1){
	                this.devFlag=true;
	                this.params.devName="";
	            }else{
	                this.devFlag=false;
	                obj = this.devs.find((item)=>{
	                    return item.devId === val;
	                });
	                this.params.devName=obj.devName;
	            }
	        },
	        loadType(){
	            this.$axios.post(`/tenement/share/selectDicByType`,{type:"SHOPS_TYPE"}).then(res => {
	                this.shopType=res;
	            });
	        },
	        back(){
	        	this.$confirm('确认返回列表吗？', '提示', {
	                confirmButtonText: '确定',
	                cancelButtonText: '取消',
	                type: 'warning'
	            }).then(()=>{
	                this.$router.push({
	                	path:"/shopmanage"
	                })
	            }).catch((error)=>{
	                console.log(error);
	            })
	        },
	        next(){
	        	if(this.active==1){
	                if (!this.params.cityId) {
	                    this.warn('请选择城市');
	                    return;
	                }
	                if (!this.params.areaId) {
	                    this.warn('请选择区域');
	                    return;
	                }
	                if (!this.params.tradingCode) {
	                    this.warn('请选择商圈');
	                    return;
	                }
	                if (!this.params.devId) {
	                    this.warn('请选择楼盘');
	                    return;
	                }
	                if (this.params.devId == -1 && this.params.devName == "") {
	                    this.warn('请输入楼盘名称');
	                    return;
	                }
	                if (!this.params.detailedAddress) {
	                    this.warn('请填写详细地址');
	                    return;
	                }
	                if (!this.params.type) {
	                    this.warn('请选择类型');
	                    return;
	                }
	                /*判断物业费*/
	                var reg1 = /^\d+(\.\d{1,2})?$/;
	                if (this.params.propertyFee != "" && !reg1.test(this.params.propertyFee)) {
	                    this.warn('请输入正确的物业费');
	                    return;
	                }
	                /*判断物业公司*/
	                if (this.params.propertyCompany.length>100) {
	                    this.warn('不能超过100个字符');
	                    return;
	                }
	                if (!this.params.trafficFacilities) {
	                    this.warn('请填写交通配套');
	                    return;
	                }
	                /*支付方式*/
	                this.$axios.post(`/tenement/share/selectDicByType`,{type:"PAY_TYPE"}).then(res => {
	                    this.paymentWays=res;
	                });
	                /*装修*/
	                this.$axios.post(`/tenement/share/selectDicByType`,{type:"DECORATE"}).then(res => {
	                    this.decorates=res;
	                });
	                /*产权*/
	                this.$axios.post(`/tenement/share/selectDicByType`,{type:"PROPERTY"}).then(res => {
	                    this.propertys=res;
	                });
	                /*最长租期*/
	                this.$axios.post(`/tenement/share/selectDicByType`,{type:"MAX_LEASE"}).then(res => {
	                    this.maxLeases=res;
	                });
	                /*是否分割*/
	                this.$axios.post(`/tenement/share/selectDicByType`,{type:"SEGMENTATION"}).then(res => {
	                    this.segmentations=res;
	                });
	                /*适合营业*/
	                this.$axios.post(`/tenement/share/selectDicByType`,{type:"OPERATION"}).then(res => {
	                    this.operations=res;
	                });
	                /*当前状态*/
	                this.$axios.post(`/tenement/share/selectDicByType`,{type:"CURRENT_STATUS"}).then(res => {
	                    this.currentStatuss=res;
	                });
	            }else if(this.active==2){
	                if (!this.params.area) {
	                    this.warn('请输入面积');
	                    return;
	                }
	                if (!this.params.rent) {
	                    this.warn('请输入租金');
	                    return;
	                }
	                if (!this.params.unitPrice) {
	                    this.warn('请输入单价');
	                    return;
	                }
	                /*判断转让费*/
	                var reg1 = /^\d+(\.\d{1,2})?$/;
	                if (this.params.transferFee != "" && !reg1.test(this.params.transferFee)) {
	                    this.warn('请输入正确的转让费');
	                    return;
	                }
	                if(this.curFloor.length==0){
	                    this.warn('请选择所处楼层');
	                    return;
	                }
	                if (this.params.operations.length==0) {
	                    this.warn('请至少选择一个适合营业');
	                    return;
	                }
	                if (!this.params.title) {
	                    this.warn('请填写标题');
	                    return;
	                }
	                if (!this.params.houseEdge) {
	                    this.warn('请填写房源亮点');
	                    return;
	                }
	                /*配套设施*/
	                this.$axios.post(`/tenement/label/selectLabelByType`,{'Content-Type': 'application/json;charset=UTF-8'}).then(res => {
	                    this.labelss=res;
	                });
	                this.$axios.post(`/city/cityList`).then((res) => {
	                    this.savecitys=res.cityList;
	                });
	                //判断是否是连续的楼层
	                this.curFloor=this.curFloor.sort();
	                let tempArr=[];
	                for(var i=this.curFloor[0];i<=this.curFloor[this.curFloor.length-1];i++){
	                    tempArr.push(i)
	                }
	                if(this.curFloor.length==2){
	                    if((this.Secondfloors.indexOf(this.curFloor.join(",")) == -1)){
	                        if(this.curFloor.join(",") === tempArr.join(",")){
	                            console.log("连续")
	                        }else{
	                            this.warn('请选择连续的所处楼层');
	                             return;
	                        }
	                    }
	                }
	                if(this.curFloor.length==3){
	                    if((this.Threefloors.indexOf(this.curFloor.join(",")) == -1)){
	                        if(this.curFloor.join(",") === tempArr.join(",")){
	                            console.log("连续")
	                        }else{
	                            this.warn('请选择连续的所处楼层');
	                            return;
	                        }
	                    }
	                }
	                this.params.currentFloor=this.curFloor.join(",")
	            }

	            this.active = this.active + 1;
	        },
	        prev(){
	            this.active--;
	        },
	        getcurrentFloor(val){
	            this.curFloor=val
	        },
	        changeBroker(){
	        	this.params.bindingBrokerId=""
	        	this.jobnumber="";
	        },
	        querySearchAsync(queryString, cb) {
	        	let saveid=this.saveid;
	        	let formData=new FormData();
	        	formData.set("cityId",saveid);
	        	formData.set("code",queryString);
	            if(queryString !=""){
	            	this.$axios.post(`/tenement/share/selectBrokerByCityAndPhoneOrJobNumber`,formData).then(res => {
		                this.restaurants=[];
	                    for(var i=0;i<res.length;i++){
	                        this.restaurants.push({
	                            id:res[i].id,
	                            value:res[i].role+"-"+res[i].name+'-'+res[i].phone+'-'+res[i].jobNumber
	                        })
	                    }
	                    cb(this.restaurants);
		            });
	            }
	        },
	        handleSelect(item) {
	            this.params.bindingBrokerId=item.id;
	        },
	        delpic(index){
	            this.params.imgs.splice(index,1);
	        },
	        save(){

	            if(this.params.labels.length==0){
	                this.warn('请至少选择一个配套设施');
	                return;
	            }
	            if(this.params.imgs.length==0){
	                this.warn('请上传图片');
	                return;
	            }
	            if(this.params.imgs.length>15){
	                this.warn('最多上传15张图片');
	                return;
	            }
	            var arr=this.params.imgs;
	            var reg=/^[1-9][0-9]{0,}$/;
	            for(let i=0;i<arr.length;i++){
	                var repeatpic=arr[i].url;
	                var repeatnum=arr[i].index;
	                if(arr[i].index==""){
	                    this.warn('请填写图片序号');
	                    return;
	                }
	                if(!reg.test(arr[i].index)){
	                    this.warn('请填写正确的图片序号');
	                    return;
	                }
	                for(var j=0;j<i;j++){
	                    if(repeatnum==arr[j].index){
	                        this.warn('图片序号已存在');
	                        return;
	                    }
	                }
	            }
	            if(this.saveid==""){
	                this.warn('请选择绑定人员城市');
	                return;
	            }
	            if(this.params.bindingBrokerId==""){
	                this.warn('请输入绑定人员工号或手机号');
	                return;
	            }
	            this.params.userId=JSON.parse(sessionStorage.getItem("cmsUser")).userId;
	            if(this.type=="add"){
	            	this.$refs.uploadRef.submit().then((res)=>{
		            	for(let i=0;i<this.params.imgs.length;i++){
	                        for(let j=0;j<res.length;j++){
	                            if(this.params.imgs[i].fileName==res[j].split("cms/")[1]){
	                                this.params.imgs[i].url=res[j];
	                            }
	                        }
	                        delete this.params.imgs[i].fileName;
	                    }
	                    this.$refs['form'].validate((valid)=>{
			                if(!valid){
			                    return
			                }
			                this.btnloading=true;
			                this.$axios.post('/tenement/shops/add',this.params).then((res)=>{
								this.$message({
									message: '操作成功',
									showClose: true,
									type: 'success',
									onClose:()=>{
				                        this.$router.push({
				                        	path:"/shopmanage"
				                        })
									}
								});
			                })
			            })
		            })
	            }else{
	            	let isNewUpload;//判断是否有新上传的图片
	            	for(let i=0;i<this.params.imgs.length;i++){
	            		if(this.params.imgs[i].fileName){
	            			 isNewUpload=true;
	            		}else{
	            			 isNewUpload=false;
	            		}
	            	}
	            	if(!isNewUpload){
	            		this.$refs['form'].validate((valid)=>{
			                if(!valid){
			                    return
			                }
			                this.btnloading=true;
			                this.$axios.post('/tenement/shops/update',this.params).then((res)=>{
								this.$message({
									message: '操作成功',
									showClose: true,
									type: 'success',
									onClose:()=>{
				                        this.$router.push({
				                        	path:"/shopmanage"
				                        })
									}
								});
			                })
			            })
	            	}else{
        		     	this.$refs.uploadRef.submit().then((res)=>{
			            	for(let i=0;i<this.params.imgs.length;i++){
		                        for(let j=0;j<res.length;j++){
		                            if(this.params.imgs[i].fileName==res[j].split("cms/")[1]){
		                                this.params.imgs[i].url=res[j];
		                            }
		                        }
		                        delete this.params.imgs[i].fileName;
		                    }
		                    this.$refs['form'].validate((valid)=>{
				                if(!valid){
				                    return
				                }
				                this.btnloading=true;
				                this.$axios.post('/tenement/shops/update',this.params).then((res)=>{
									this.$message({
										message: '操作成功',
										showClose: true,
										type: 'success',
										onClose:()=>{
					                        this.$router.push({
					                        	path:"/shopmanage"
					                        })
										}
									});
				                })
				            })
			            })
	            	}
	       
	            }
	            
	            
	        },
		},
		created(){
			this.params.userId=JSON.parse(sessionStorage.getItem("cmsUser")).userId
		},	
		mounted(){
			this.loadCity();
			this.loadType();
			if(this.type=="edit"){
				this.loadEditData();
			}
		},
		components:{
			// uploadImg,
			upload
		}
	}
</script>

<style lang="stylus">
	.addshop{
		.rpic:before{
			    content: '*';
			    color: #f56c6c;
			    margin-right: 4px;
		}
		.cityornum .el-form-item__label:before{
            content: '*';
            color: #f56c6c;
            margin-right: 4px;
        }
		.imgbox{
			margin-left:65px;
			.img-wrap{
				display:inline;
				div{
					width:180px;
					height:180px;
					margin-right:15px;
					margin-bottom:40px;
					display:inline-block;
					position:relative;
					img{
						width:100%;
						height:100%;
					}
					i{
						width: 20px;
					    height: 20px;
					    line-height: 20px;
					    border-radius: 100%;
					    display: block;
					    position: absolute;
					    top: -10px;
					    right: -10px;
					    cursor: pointer;
					    color: #fff;
					    text-align: center;
					    background-color: red;
					}
					input{
						width: 100%;
					    margin-top: 5px;
					    border-radius: 5px;
					    border: 1px solid #ccc;
					    text-indent: 8px;
					    outline:none;
					}
				}
			}
			.multipleUploadImg{
				display:inline-block;
				.img-wrapper{
					.add-btn{
						width:190px;
						height:190px;
					}
				}
			}
		}
		.disUpload{
            .el-upload-list{
                    display: none;
            }
        }
        .newBox{
        	width:148px;
        	height:148px;
        	border:1px dashed #c0ccda;
        	border-radius: 6px;
        	display:inline-block;
        	margin-right:10px;
        	margin-bottom:40px;
        	position:relative;
        	.mask{
        		position:absolute;
        		padding:0 30px;
        		top:0;
        		bottom:0;
        		left:0;
        		right:0;
        		background-color:rgba(0,0,0,0.5);
        		transition:all 0.5s ease-out;
        		opacity:0;
        		display:flex;
        		align-items:center;
        		justify-content:space-around;
        		.icon{
        			cursor:pointer;
        			font-size:20px;
        		}
        		&:hover{
	        		opacity:1;
	        	}
        	}
        	.input{
        		width:98%;
        		text-indent:5px;
        	}
        	
        }
	}
</style>

